<!DOCTYPE html>
<html lang="en">

<!--
  2021年4月29日21:55:59

  flex 布局常用语法

  ##父级容器相关
    flex-direction      主轴方向 水平和垂直
    justify-content     主轴上的对齐方式      开始对齐, 结束对齐, 居中对齐, 两端对齐
      space-between 在左右两侧没有边距, space-around 有边距
    align-items         在交叉轴上的布局方式, 开始对齐, 结束对齐, 居中对齐
    flex-wrap           是否换行

  ## 子元素相关
    align-self      子元素在交叉轴上的对齐方式
    值:   start, center, flex-end
    开始对齐, 结束对齐, 居中对齐, 可覆盖align-items

-->

<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .box {
      width: 400px;
      height: 400px;
      margin: 0 auto;
      border: 5px solid #ccc;
      box-sizing: border-box;
      border-radius: 10px;
      padding: 20px;
      display: flex;
      justify-content: space-between;   /* 在主轴上的对齐方式 */
    }

    .item {
      display: block;
      width: 100px;
      height: 100px;
      background-color: red;
      border-radius: 50%;
    }

    .item:nth-child(2) {
      align-self: center;     /* 子元素在交叉轴上的对齐方式 */
    }

    .item:nth-child(3) {
      align-self: flex-end;
    }

  </style>
</head>
<body>
<div class="box">
  <span class="item"></span>
  <span class="item"></span>
  <span class="item"></span>
</div>
</body>
</html>
